<template>
  <div
    class="bg-[url(images/bg.png)] bg-[length:100%_100%] bg-left-top w-full h-full flex flex-col"
  >
    <header class="w-100% flex items-center justify-between h-[64px] px-[20px]">
      <div class="flex items-center">
        <img
          src="../../assets/images/party.png"
          alt=""
          class="w-[32px] h-[32px] mr-[8px]"
        />
        <img
          src="../../assets/images/national.png"
          alt=""
          class="w-[32px] h-[32px] mr-[8px]"
        />
        <div class="font-bold text-[28px]">数据标准化系统</div>
      </div>
      <div class="flex items-center">
        
        <div class="flex items-center cursor-pointer" @click="pwdDialogVisible = true">
          <el-icon><Document /></el-icon>
          <span class="mr-[32px] ml-[4px]">密码集</span>
        </div>
        <!-- 只有管理员才能看到用户管理 -->
        <div 
          v-if="isAdmin" 
          class="flex items-center cursor-pointer" 
          @click="userDialogVisible = true"
        >
          <el-icon><Setting /></el-icon>
          <span class="mr-[32px] ml-[4px]">用户管理</span>
        </div>
        <el-popover
          placement="bottom-start"
          :width="200"
          trigger="hover"
          :show-arrow="false"
        >
          <template #reference>
            <div class="flex items-center cursor-pointer">
              <img
                src="../../assets/images//persol.png"
                alt=""
                class="w-[28px] h-[28px] mr-[10px]"
              />
              <span class="text-[16px] text-[#181818]">{{ userName }}</span>
              <el-icon><CaretBottom /></el-icon>
            </div>
          </template>
          <div class="p-[4px]">
            <div class="login_out" @click="resetPwd">修改密码</div>
          </div>
          <div class="p-[4px]">
            <div class="login_out" @click="onLogin">退出登录</div>
          </div>
        
        </el-popover>
      </div>
    </header>
    <RouterView></RouterView>
    <pwdDialog v-model:pwd-dialog-visible="pwdDialogVisible" />
    <userDialog v-model:user-dialog-visible="userDialogVisible" />
    <setpwdDialog v-model:set-pwd-dialog-visible="setPwdDialogVisible" />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useToken } from '@/store/useToken';
import { useUser } from '@/store/useUser';

const router = useRouter();
const token = useToken();
const user = useUser();

// 获取当前用户信息
const currentUser = computed(() => user.getUserInfo);
const userName = computed(() => currentUser.value.name || currentUser.value.loginName || 'admin');

// 判断是否是管理员
const isAdmin = computed(() => {
  const userRoles = currentUser.value.roles;
  if (!userRoles || !Array.isArray(userRoles)) return false;
  
  // 检查角色数组中是否有"管理员"角色
  return userRoles.some(role => {
    // 如果角色是对象格式，检查name字段
    if (typeof role === 'object' && role.name) {
      return role.name === '管理员';
    }
    // 如果角色是字符串，直接比较
    return role === '管理员';
  });
});

// 修改密码
const resetPwd = () => {
  setPwdDialogVisible.value = true;
}

// 退出登录
const pwdDialog = defineAsyncComponent(() => import('@/components/pwdDialog/index.vue'))
const userDialog = defineAsyncComponent(() => import('@/components/userDialog/index.vue'))
const setpwdDialog = defineAsyncComponent(() => import('@/components/setpwdDialog/index.vue'))
const pwdDialogVisible = ref(false)
const userDialogVisible = ref(false)
const setPwdDialogVisible = ref(false)

const onLogin = () => {
  // 清除token和用户信息
  token.clear();
  user.clear();
  router.push({
    path: "/",
  });
};

// 组件挂载时显示调试信息
onMounted(() => {
  console.log('Header组件挂载 - 当前用户信息:', currentUser.value);
  console.log('Header组件挂载 - 用户角色:', currentUser.value.roles);
  console.log('Header组件挂载 - 是否是管理员:', isAdmin.value);
});
</script>

<style lang="scss" scoped>
.login_out {
  color: #181818;
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  &:hover {
    background: rgba(26, 102, 255, 0.1);
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 358px;
  min-height: 100%;
}
.el-menu--collapse {
  display: none;
}
</style>
